<template>
  <view class="p-h24">
    <RcNavigation
      title="企服联聘"
      iconColor="white"
      color="#fff"
      bgColor="#1269FF" />
    <view class="p-v40">
      <text class="text-700-136">编辑您行业的标签吧：</text>
    </view>
    <view class="tag-list">
      <view
        v-for="item in list"
        :key="item.id"
        class="flex-c tag"
        :class="[{ selected: selected.includes(item.id) }]"
        @click="selectTag(item.id)">
        <text>{{ item.name }}</text>
      </view>
    </view>
    <view class="foot">
      <view class="opera">
        <RcButton
          :width="624"
          :top="0"
          text="下一步"
          @click="handleNext" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import RcNavigation from '@/components/navigation.vue'
  import RcButton from '@/components/button.vue'

  type IndusTag = {
    id: number;
    name: string;
  }

  const list = ref<IndusTag[]>([])
  const selected = ref<number[]>([])

  const selectTag = (id: number) => {
    const index = selected.value.indexOf(id)

    if (index > -1) {
      selected.value.splice(index, 1)
    } else {
      selected.value.push(id)
    }
  }

  const handleNext = () => {
    if (selected.value.length === 0) {
      uni.$u.toast('请选择行业标签')
      return
    }

    uni.setStorage({
      key: 'indus_tag',
      data: selected.value.join(','),
      success: () => {
        uni.navigateTo({ url: '/pages/user/firm/firm' })
      },
    })
  }

  const getList = () => {
    uni.showLoading({ mask: true })
    uni.$u.get<IndusTag[]>('/company/seltag').then((res) => {
      if (res.code === 1) {
        list.value = res.data
      }
    }).finally(() => {
      uni.hideLoading()
    })
  }

  onLoad(() => {
    getList()
  })
</script>

<style>
	page {
		background-color: #EEF8FF;
	}
</style>

<style lang="scss" scoped>
	.tag-list {
		display: flex;
		flex-wrap: wrap;
		margin-right: -24rpx;
	}
	.tag {
		padding: 0 68rpx;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		height: 82rpx;
		border-radius: 8rpx;
		background-color: $bg-color-1;
		font-size: 30rpx;
		box-shadow: 0rpx 3rpx 0rpx 1rpx #BBDFF8;
		&.selected {
			color: $text-color-2;
			background-color: $bg-color-2;
		}
	}
	.foot {
		padding-top: 178rpx;
	}
	.opera {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 178rpx;
		display: flex;
		justify-content: center;
		background-color: #EEF8FF;
	}
</style>
